<template>
  <div class="reg-login-container">
    <div class="login-body">
      <div class="login-header">
        <div class="header-top">
          <div class="top-text">
            ABOUT DUAL BY FIT ISLAND·MAKE A BOOKING·MANAGE WAITINGS
          </div>
          <a @click="gotoLogin">Log In</a>
        </div>
        <div class="header-bottom">
          <a id="mainlogo1" href="#"><img src="../static/slider/LOGO.png" /> </a>
          <div class="btm-text">ONLINE BOOKINGS</div>
        </div>
      </div>
      <div class="login-content">
        <div class="flow-box">
          <div class="flow-title">
            <div class="title">BOOKING INFO</div>
            <div class="sub-title">PROCESS AND TERMS</div>
          </div>
          <div class="flow-body">
            <div class="flow-item">
              <div class="flow-icon">
                <img src="../static/slider/right.png" alt="" />
              </div>
              <div class="flow-num">1</div>
              <div class="flow-text">
                <div class="item-title">CALENDAR</div>
                <div class="item-subtitle">SELECT DATES & SEATS</div>
              </div>
            </div>
            <div class="flow-item">
              <div class="flow-icon">
                <img src="../static/slider/right.png" alt="" />
              </div>
              <div class="flow-num">2</div>
              <div class="flow-text">
                <div class="item-title">REGISTER</div>
                <div class="item-subtitle">
                  REGISTER YOUR<br />BOOKING REQUEST
                </div>
              </div>
            </div>
            <div class="flow-item">
              <div class="flow-icon">
                <img src="../static/slider/right.png" alt="" />
              </div>
              <div class="flow-num">3</div>
              <div class="flow-text">
                <div class="item-title">PAYMENT</div>
                <div class="item-subtitle">CONFIRM BOOKING<br />BY DEPOSIT</div>
              </div>
            </div>
          </div>
        </div>
        <!-- 内容 -->
        <div class="booking-step">
          <div class="step-left">
            <div class="step-title">WELCOME TO DUAL BY FIT ISLAND</div>
            <div class="step-subtitle">THE DINING EXPERIENCE ?</div>
            <div class="step-detail">
              <div>
                Dual by Fit lsland is the first experimental restaurant of its
                kind.
              </div>
              <br />
              <div>A single table of ten seats only.</div>
              <div>A dining room featuring high end technologies</div>
              <div>A 20-course "Avant-Garde" set menu.</div>
              <div>All guests sit together.</div>
              <div>
                The experience unfolds as a play, Food leads.Each course<br />is
                enhanced with its own taste-tailoredatmosphere: lights,<br />sounds,
                music, scents, projectionimages and imagination...<br />and
                food.
              </div>
              <br />
              <div style="font-weight: bold; color: #b08e4b">
                From 1 to 10 seats, anyone can book in Dual by Fit<br />lsland,
                lt is not necessary to privatize the entire table
              </div>
              <br />
              <div>Guests depart all together from a meeting point.</div>
              <br />
              <div>Opened from Tuesday to Saturday evening.</div>
              <br />
            </div>
            <div class="read-more">
              <img src="../static/slider/booking.png" alt="" />
              <div class="more-text">READ MORE</div>
            </div>
          </div>
          <div class="step-right">
            <div class="online-booking">
              <div class="step-title">3 STEPS ONLINE BOOKING</div>
              <div class="online-step">
                <div class="step-item">
                  <div class="step-subtitle">1. SELECT DATE AND SEATS</div>
                  <div class="item-detail">
                    <p>
                      Check availabilities on the calendar, select the date and
                      number of seats.
                    </p>
                    <p>
                      Bookings and Waiting Lists are opened for 4 months in
                      ad-vance.
                    </p>
                  </div>
                </div>
                <div class="step-item">
                  <div class="step-subtitle">
                    2. REGISTER YOUR BOOKING REQUEST
                  </div>
                  <div class="item-detail">
                    <p>Register and Log In to confirm your booking request</p>
                  </div>
                </div>
                <div class="step-item">
                  <div class="step-subtitle">3. CONFIRM BOOKING BY DEPOSIT</div>
                  <div class="item-detail">
                    <div>
                      Due to the limited number of seats available, guests are
                      kindly requested to pay a deposit to confirm their
                      bookings.
                    </div>
                    <div>Deposit payment can be made through:</div>
                    <div>
                      -Credit cards via PayPal (Only non-CNY and payments
                      outside of China accepted)
                    </div>
                    <div>-Bank Transfer</div>
                    <div>
                      -Cash & any credit or debit cards (every day from 17:30 to
                      22:30)
                    </div>
                    <div>-Alipay</div>
                    <div>-WeChat</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="to-booking"><span>START YOUR BOOKING</span>▶</div>
            <div class="booking-question">
              <div class="step-subtitle">QUESTIONS ?</div>
              <div class="question-text">
                <div>
                  Should you have any issue with our online booking system,kindly
                  check
                </div>
                <div style="color: #b08e4b">Frequently Asked Questions: F.A.Q.</div>
                <p>
                  Alternatively you may contact<span style="color: #b08e4b"
                    > Zhou @fitisland.sg</span
                  ><br />(Tuesday to Saturday - 1 pm to 6 pm Time)
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="login-footer">
        <div class="foot-body">
          <a id="subLogo" href="#"><img src="../static/slider/LOGO.png" /> </a>
          <span class="foot-web"> 2024 @ DUAL BY FIT ISLAND</span>
          <span class="foot-link">
            : www.dual by fit island.sg .: contact . terms & condition . fag :
            private dinner</span
          >
        </div>
      </div>
    </div>
  </div>
</template>
  
  <script>
export default {
  name: "Booking",
  data() {
    return {
      bookingInfo: {},
    };
  },
  methods: {
    gotoLogin() {
      this.$router.push({
        name: "Login",
      });
    },
  },
};
</script>
  
  <style lang="scss" scoped>
.reg-login-container {
  width: 100vw;
  min-height: 100vh;
  box-sizing: border-box;
  background-color: rgb(244, 222, 185);
  display: flex;
  justify-content: center;
}

.login-body {
  width: 1020px;
  border-right: 0.5px solid #2e0c00;
  border-left: 0.5px solid #2e0c00;
  height: 100%;
  background-color: #fff;
  display: flex;
  flex-direction: column;
}

.login-header {
  flex: 2;
  background-color: #2e0c00;
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.header-top {
  display: flex;
  justify-content: space-between;
  color: #b08e4b;
}

.header-top a {
  cursor: pointer;
}

.login-header a {
  text-decoration: none;
  color: #b08e4b;
}
.header-top > a {
  color: #f3deb9;
}
.login-content {
  border-top: 4px solid #b08e4b;
  flex: 12;
  padding: 10px 40px 40px 40px;
}
.login-footer {
  flex: 2;
  padding: 20px 40px;
  border-top: 4px solid #b08e4b;
}

#mainlogo1 img {
  width: 200px;
}
.btm-text {
  color: #f3deb9;
  font-size: 28px;
  margin-left: 15px;
}

.header-bottom {
  display: flex;
}

.flow-box {
  display: flex;
  align-items: center;
}
.flow-title {
  margin-right: 40px;
}
.flow-title .title {
  color: #5a3819;
  font-size: 20px;
  font-weight: bold;
}
.flow-title .sub-title {
  color: #b08e4b;
}

.flow-body {
  display: flex;
  justify-content: space-around;
}

.flow-item {
  display: flex;
  align-items: center;
  margin-right: 40px;
}
.flow-icon {
  display: flex;
  align-items: center;
}
.flow-icon img {
  width: 16px;
  height: 30px;
}
.flow-num {
  font-size: 36px;
  font-weight: bold;
  color: #b08e4b;
  margin: 0 10px;
}

.flow-text .item-title {
  color: #b08e4b;
  font-weight: bold;
}
.flow-text .item-subtitle {
  color: #b08e4b;
  font-size: 12px;
}

#subLogo img {
  width: 100px;
}

.foot-body {
  display: flex;
  align-items: center;
}
.foot-web {
  font-size: 14px;
  color: #5a3819;
  margin: 0 5px;
}
.foot-link {
  font-size: 12px;
  color: #b08e4b;
}

.booking-step {
  width: 100%;
  margin: 20px auto;
  display: flex;
  justify-content: space-between;
  // padding-right: 40px;

  .step-left,
  .step-right {
    width: 44%;
    border-radius: 10px;
  }

  .step-left {
    padding: 20px;

    background-color: #f3deb9;
    height: 80%;
  }
}

.step-title {
  color: #5a3819;
  font-weight: bold;
  font-size: 22px;
}

.step-subtitle {
  font-size: 18px;
  font-weight: bold;
  color: #b08e4b;
  margin: 20px 0;
}

.read-more {
  width: 100%;
  height: 180px;
  overflow: hidden;
  position: relative;
  > img {
    width: 100%;
    height: 100%;
  }
  .more-text {
    position: absolute;
    top: 2%;
    right: 2%;
    color: #b08e4b;
    font-size: 14px;
    cursor: pointer;
  }
}

.online-booking {
  background-color: #f3deb9;
  border-radius: 10px;
  padding: 20px 20px 10px 20px;
}
.to-booking {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 10px 0;
  border-radius: 5px;
  color: #fff;
  font-size: 24px;
  padding: 5px 0;
  font-weight: bold;
  background: linear-gradient(to bottom, #dcbe6e 5%, #aa8c46 100%);
  cursor: pointer;
  user-select: none;
}

.booking-question {
  background-color: #f3deb9;
  border-radius: 10px;
  padding: 20px 20px 10px 20px;
}
</style>